<template>
  <div class="page">
    <el-form>
      <el-form-item>
        <el-button type="primary" @click="addNew">新增</el-button>
      </el-form-item>
    </el-form>

    <el-table :data="list" border>
      <el-table-column type="index" label="序号"></el-table-column>
      <el-table-column prop="id" label="ID"></el-table-column>
      <el-table-column prop="content" label="详情"></el-table-column>
      <el-table-column prop="route" label="路由"></el-table-column>
      <el-table-column label="图片">
        <template slot-scope="scope">
          <el-image
            style="width: 50px; height: 50px"
            :src="scope.row.imageUrl"
          ></el-image>
        </template>
      </el-table-column>
      <el-table-column label="状态">
        <template slot-scope="scope">
          <el-switch
            :value="scope.row.status"
            :active-value="1"
            :inactive-value="2"
          ></el-switch>
        </template>
      </el-table-column>
      <el-table-column label="类型">
        <template slot-scope="scope">
          {{ scope.row.type === 1 ? "广告" : "文本" }}
        </template>
      </el-table-column>

      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button type="primary" @click="edit(scope.row)">编辑</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 新增首页 -->
    <el-dialog title="首页广告" :visible.sync="dialogFormVisible">
      <el-form :model="form">
        <el-form-item label="图片" label-width="80">
          <ImageUpload v-model="form.imageUrl"></ImageUpload>
        </el-form-item>

        <el-form-item label="内容" label-width="80">
          <!-- <Editor v-model="form.content" :min-height="192"></Editor> -->
          <CustomerEditor v-model="form.content"></CustomerEditor>
        </el-form-item>

        <el-form-item label="类型" label-width="80">
          <el-select v-model="form.type" placeholder="请选择类型">
            <el-option label="广告" :value="1"></el-option>
            <el-option label="文本" :value="2"></el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="状态" label-width="80">
          <!-- <el-select v-model="form.status" placeholder="请选择状态">
            <el-option label="上架" :value="1"></el-option>
            <el-option label="下架" :value="2"></el-option>
          </el-select> -->
          <el-switch
            v-model="form.status"
            :active-value="1"
            :inactive-value="2"
          ></el-switch>
        </el-form-item>

        <el-form-item label="路由" label-width="80">
          <el-input v-model="form.route" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="submitData">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import { frameList, frameAdd, frameEdit } from "@/api/ds/frame";
import ImageUpload from "@/components/ImageUpload/index.vue";
import Editor from "../../../components/Editor/index.vue";
import CustomerEditor from "../../../components/CustomerEditor/CustomerEditor.vue";

export default {
  components: { ImageUpload, Editor, CustomerEditor },
  props: {},
  data() {
    return {
      list: [],
      queryParams: {
        pageNum: 1,
        pageSize: 10,
      },
      mode: "add",
      //   新增表单
      form: {
        imageUrl: "",
        content: "",
        type: 1,
        status: 1,
        route: "",
      },
      dialogFormVisible: false,
    };
  },
  computed: {},
  watch: {},
  created() {
    this.getData();
  },
  methods: {
    async getData() {
      let res = await frameList();
      if (res.code === 200) {
        this.list = res.rows;
      }
    },

    addNew() {
      this.dialogFormVisible = true;
      this.mode = "add";
    },

    edit(row) {
      this.form = row;
      this.dialogFormVisible = true;
      this.mode = "edit";
    },

    async submitData() {
      if (this.mode === "add") {
        let res = await frameAdd(this.form);
        if (res.code === 200) {
          console.log(res);
          this.$notify({
            title: "成功",
            message: res.msg,
            type: "success",
          });

          this.dialogFormVisible = false;
          this.getData();
        }
      } else {
        let res = await frameEdit(this.form);
        if (res.code === 200) {
          console.log(res);
          this.$notify({
            title: "成功",
            message: res.msg,
            type: "success",
          });

          this.dialogFormVisible = false;
          this.getData();
        }
      }
    },
  },
  mounted() {},
  beforeCreate() {},
  beforeMount() {},
  beforeUpdate() {},
  updated() {},
  beforeDestroy() {},
  destroyed() {},
  activated() {},
  deactivated() {},
};
</script>
<style lang="scss" scoped>
.page {
  width: 100%;
  min-height: 80vh;

  display: flex;
  flex-flow: column nowrap;
  justify-content: flex-start;
  align-items: flex-start;

  box-sizing: border-box;
  padding: 15px;
}
</style>
